<template>
	<view class="dropdown-container">
		<text class="input-label">{{ title }}</text>

		<!-- 下拉框显示部分 -->
		<view class="dropdown-display" @click="toggleDropdown">
			<text :class="[selectedLabel?'':'input-placeholder']">{{ selectedLabel || placeholder }}</text>
		</view>

		<!-- 下拉选项列表 -->
		<view class="dropdown-list" v-if="isOpen">
			<view class="dropdown-item" v-for="(option, index) in options" :key="index" :data-value="option.value" @click="handleOptionClick(option, index)">
				{{ option.label }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: ""
			},
			title: {
				type: String,
				default: "字段"
			},
			options: {
				type: Array,
				required: true,
				default: () => [],
				// {value:"",label:""}
			},
			placeholder: {
				type: String,
				default: "请选择"
			}
		},
		data() {
			return {
				isOpen: false,
			};
		},
		methods: {
			toggleDropdown() {
				this.isOpen = !this.isOpen;
			},
			handleOptionClick(option, index) {
				this.isOpen = false;
				this.$emit("input", option.value);
			}
		},
		computed: {
			selectedLabel() {
				let finded = this.options.find(item => item.value == this.value)
				if (finded) {
					return finded.label;
				}
				return "";
			},
		},
	};
</script>
<style lang="scss" scoped>
	// 引入sass样式变量(本来想全局引入，但是不成功，以后有空再解决)
	@import '@/static/scss/variables.scss';

	.dropdown-container {
		position: relative;
		width: 100%;

		.input-label {
			font-size: $fontSize;
			color: $colorNormalFont;
			font-weight: bold;
		}
	}

	.dropdown-display {
		margin-top: 5px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		background-color: #fff;
		font-size: $fontSize;
	}

	.dropdown-list {
		position: absolute;
		top: 100%;
		left: 0;
		margin-top: 3px;
		width: 100%;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-sizing: border-box;
		z-index: 999;
	}

	.dropdown-item {
		padding: 10px;
	}

	.dropdown-item:active {
		background-color: #f0f0f0;
	}
</style>